<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="title" content="Video hot">
<meta name="description" content="Những video hot trên internet">
<meta name="keywords" content="video hot, trollvl">
<meta property="og:url" content="http://trollvl.com/video">
<meta property="og:title" content="Video hot">
<meta property="og:description" content="Những videos hot nhất trên internet tuần qua">
<meta property="og:image" content="http://trollvl.com/resources/images/troll.jpg">
<meta property="og:site_name" content="Trollvl.com">
<meta property="fb:app_id" content="299999716845708">
<meta property="og:type" content="website">
<link rel="shortcut icon" href="/resources/images/favicon.ico"
	type="image/x-icon">
<link rel="icon" href="/resources/images/favicon.ico"
	type="image/x-icon">
<script src="resources/js/jquery.1.9.1.min.js"></script>
<script src="resources/js/bootstrap.min.js"></script>
<script type="text/javascript" src="resources/js/scrollpagination.js"></script>
<script type="text/javascript" src="resources/js/videoFunction.js"></script>
<title>Video hot trên internet</title>
</head>
<script>
	$(function() {
		load_videos();
	});
</script>
<body>
	<tiles:insertDefinition name="videoTemplate">
		<tiles:putAttribute name="body">
			<div id="mainContainer">
				<div class="mainBox">
					<div class="subHeading">
						<h3>Những videos đang hot trên internet</h3>
					</div>
					<div id="videosContent" class="videosList">
						<c:forEach items="${videos}" var="videoItem">
							<div class="videoListItem">
								<div class="info">
									<h2 style="margin-bottom: 5px">
										<a target="_blank" href="video/${videoItem.id}">${videoItem.title}</a>
									</h2>
									<div class="stats">
										<div class="numbers">
											<span class="views" style="padding-right: 10px"><fmt:formatNumber pattern="#,###,##0" value="${videoItem.viewNumber}"/></span>
											<span class="comments"><fmt:formatNumber pattern="#,###,##0" value="${videoItem.commentNumber}"/></span>
										</div>
										<fb:like class="fb-like" data-href="video/${videoItem.id}"
											data-width="90" data-layout="button_count" data-action="like"
											data-show-faces="false" data-share="true"></fb:like>
										<div class="clear"></div>
									</div>
								</div>
								<div class="videoThumb">
									<a class="play" data-id="9407" href="video/${videoItem.id}"
										target="_blank"> <img src="http://i.ytimg.com/vi/${videoItem.youtubeId}/${videoItem.thumbnail}"
										width="728" alt="${videoItem.title}"> <span
										class="playIcon"></span>
										<div class="duration">${videoItem.duration}</div>
									</a>
								</div>
							</div>
						</c:forEach>
					</div>
					<div id="loader" class="loader">
						<span></span> <span></span> <span></span> Loading...
					</div>
				</div>
			</div>
		</tiles:putAttribute>
	</tiles:insertDefinition>
</body>
</html>